<!-- tab2 -->
<template>
  <div class="monthly-tab2 charts">
    <div id="tab2-chart1"></div>
    <!-- <div id="tab2-chart2"></div> -->
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from "vue";
import * as echarts from "echarts"; //引入图表库
export default {
  name: "tab2",
  setup() {
    const data = reactive({
      optionData1: {
        types: [], //类别
        values: [], //数据值
      },
    });
    const { proxy } = getCurrentInstance();
    onBeforeMount(() => {});
    const echartInit = () => {
      //折现图
      var myChart1 = echarts.init(document.getElementById("tab2-chart1"));
      // var myChart2 = echarts.init(document.getElementById("tab2-chart2"));
      let option1 = {
        title: {
          text: "各部门绩效月报",
          left: "center",
          top: "3%",
          textStyle: {
            // color: "#485187",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: data.optionData1.types,
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 45, //60度角倾斜显示
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.optionData1.values,
            type: "line",
            smooth: true,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      // option2.series.data = data.optionData2;
      // myChart2.setOption(option1);
    };
    onMounted(() => {
      dataInit();
    });
    //获取后台数据
    const dataInit = () => {
      proxy.$api.getMonthlyPerfScore().then((res) => {
        data.optionData1.types = res.obj.types;
        data.optionData1.values = res.obj.values;
        echartInit();
      });
    };
    const refData = toRefs(data);
    return {
      ...refData,
      echartInit,
      dataInit,
    };
  },
};
</script>
<style scoped lang="scss">
.monthly-tab2 {
  #tab2-chart1 {
    height: 350px;
  }
}
</style>
